
<script>
import child from "../page/01.vue";
import testcom from "../page/02.vue";
export default {
  data() {
    return {
      msg: "使用reader(jsx语法)",
      num: 1,
    };
  },
  computed: {
    styleColer() {
      if (this.num % 2 === 0) {
        return null;
      } else {
        return { color: "red" };
      }
    },
  },
  methods: {
    change() {
      this.num++;
    },
  },
  render() {
    return (
      <div class="home">
        <h1> {this.msg}</h1>
        <p>
          reader 函数不能用v指令，相比template 更加灵活，但是操作起来较前者麻烦,
        </p>
        <p>每当关联到页面的数据变化时 都会触发reader函数</p>
        <p style={this.styleColer}> {this.num}</p>
        <button onclick={this.change}>点击事件</button>
        <child msg={this.num} conpont={testcom}></child>
      </div>
    );
  },
};
</script>
<style lang="scss" scoped>
.home {
  font-size: 13px;
  text-align: center;
  button {
    width: 100px;
    height: 30px;
  }
}
</style>